<template>
  <div>
    <banner module="home">
      <div class="banner-content">
        <div class="header-wap flex hidden-pc">
          <div>
            <p v-html="bannerTxt.first" class="first"></p>
            <p v-html="bannerTxt.second" class="second"></p>
            <div class="fourth">
              <a href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes" target="_blank">
                <p v-html="bannerTxt.fourth" style="color: white"></p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </banner>
    <div class="home-content">
      <vtitle name="您的企业是否有这样的财税困扰？" class="title"/>
      <div class="center clearfix company">
        <div
          class="content-block troubled wow fadeInUp"
          v-for="(item,index) in dataListsOne"
          :key="index"
          :data-wow-delay="`${index/4}s`"
        >
          <div class="flex flex-center flex-wrap">
            <div class="content-hover">
              <span class="icon"></span>
              <p v-html="item.contentTitle" class="contentTitle"></p>
              <template v-for="child in item.text.split('|')">
                <p v-html="child" :key="child" class="item-txt"></p>
              </template>
            </div>
          </div>
        </div>
      </div>
      <vtitle name="这些困扰可能导致的后果" class="title"/>
      <div class="clearfix company-box">
        <div
          class="content-block ending wow fadeInUp"
          v-for="(item,index) in dataListsTwo"
          :key="index"
          :data-wow-delay="`${index/4}s`"
        >
          <div class="ending-box clearfix">
            <span class="left-img"></span>
            <div class="center fleft right-txt">
              <div class="flex flex-center flex-wrap">
                <div>
                  <span class="icon"></span>
                  <p v-html="item.contentTitle"></p>
                  <template v-for="child in item.text.split('|')">
                    <p v-html="child" :key="child" class="item-txt"></p>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <vtitle name="您可以尝试我们的“智能财税托管服务”" class="title"/>
    <div class="three-model">
      <div class="home-content clearfix">
        <div
          class="content-block server fleft wow fadeInUp"
          v-for="(item,index) in dataListsThree"
          :key="index"
          :data-wow-delay="`${index/4}s`"
          :class="{'center-box':index===2}"
        >
          <div
            class="serve-box"
            :class="{'box-active':index!=2,'center-box-child':index===2}"
          >
            <div v-if="index!==2">
              <p v-html="item.contentTitle" class="contentTitle" v-if="item.contentTitle"></p>
              <img src="@/assets/img/home/icon-3.png" alt v-else>
              <template v-for="(item,index) in item.text.split(' ')">
                <p v-html="item"></p>
              </template>

            </div>
          </div>
        </div>
      </div>
    </div>
    <vtitle name="仅需几步，服务马上开始" class="title"/>
    <div class="tips-box">
      <tips
        v-for="(item,index) in dataListsFour"
        :key="index"
        class="wow"
        :class="{'tips-active':tipsActive==index,'fadeInDown':index%2==1,'fadeInUp':index%2==0}"
      >
        <div class="flex flex-wrap flex-center">
          <div>
            <span class="icon"></span>
            <p v-html="index+1+'、'+item.text"></p>
          </div>
        </div>
      </tips>
    </div>
    <vtitle name="我们为您承诺" class="title" ref="scroll"/>
    <div class="wave-model">
      <div class="home-content promise-model">
        <div v-for="(item,index) in dataListsFive" :key="index" class="promise inline-block">
          <img
            :src="require(`@/assets/img/home/icon-5.${index+1}.png`)"
            alt
            class="img-item hide-item wow fadeInUp"
            data-wow-delay="0.5s"
          >
          <p
            v-html="item.contentTitle"
            class="contentTitle hide-item wow fadeInUp"
            data-wow-delay="1s"
          ></p>
          <p v-html="item.text" class="text hide-item wow fadeInUp" data-wow-delay="1.5s"></p>
        </div>
      </div>
      <div id="wave1"></div>
    </div>
    <div class="obtain">
      <div>
        <vtitle name="您将获得什么？" class="title obtain-title"/>
        <div class="obtain-box center clearfix">
          <div
            class="fleft obtain-box-item wow fadeInUp"
            v-for="(item,index) in dataListsSix"
            :key="index"
            :data-wow-delay="`${index/4}s`"
          >
            <span class="img"></span>
            <p v-html="item.text" class="text"></p>
          </div>
        </div>
        <div class="hidden-wap obtain-pc">
          <img src="@/assets/img/home/model6-pc-txt.jpg" alt="" width="100%">
        </div>
        <div class="hidden-pc obtain-wap">
          <img src="@/assets/img/home/model6-txt.png" alt="" width="100%">
        </div>
      </div>
    </div>
    <div class="serve-to">
      <div class="home-content">
        <vtitle name="我们曾服务的客户" class="title"/>
        <div class="clearfix serve-user">
          <div class="server-box">
            <div
              v-for="(item,index) in dataListsSeven"
              :key="index"
              class="server-user wow fadeInLeft"
              :data-wow-delay="`${index/3}s`"
            >
              <div class="box">
                <div class="clearfix">
                  <div class="fleft">
                    <img :src="require(`@/assets/img/home/s${index+1}.png`)" alt>
                  </div>
                  <div class="right-overflow">
                    <p v-html="item.contentTitle" class="contentTitle"></p>
                    <p  class="disc"><span style="font-weight:bold">公司介绍：</span><span v-html="item.disc"></span></p>
                  </div>
                </div>
                <p  class="text"><span style="font-weight:bold">服务评价：</span><span v-html="item.text"></span></p>
              </div>
            </div>
          </div>
          <div class="hidden-wap honme-swiper">
            <swiper :options="swiperOption" style="height:100%">
              <swiper-slide v-for="(item,index) in 8" :key="index">
                <div class="flex flex-wrap flex-space">
                  <div class="flex-img-box" v-for="(item,index) in 14" :key="index">
                    <img src="@/assets/img/home/gm.png" alt>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
          <div class="hidden-pc flex flex-wrap flex-space">
            <div class="flex-img-box wow fadeInUp" v-for="(item,index) in 8" :key="index" :data-wow-delay="`${index/4}s`">
              <img src="@/assets/img/home/gm.png" alt>
            </div>
          </div>
        </div>
      </div>
    </div>
    <vtitle name="我们对于财税行业的见解" class="title"/>
    <div class="money flex-wrap flex flex-space">
      <div
        class="server-user wow fadeInUp"
        v-for="(item,index) in dataListsEight"
        :key="index"
        :data-wow-delay="`${index/4}s`"
      >
        <div class="box">
          <router-link to="/watchDetail">
            <div class="clearfix">
              <div class="fleft">
                <img :src="require(`@/assets/img/home/s${index+1}.png`)" alt>
              </div>
              <div class="right-overflow">
                <p v-html="item.contentTitle" class="contentTitle"></p>
                <p v-html="item.disc" class="disc"></p>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <!-- right-nav -->
    <div class="right-nav hidden-wap">
      <img src="@/assets/img/home/home-nav.png" alt="">
      <div class="right-nav-menu">
        <span 
        v-for="(item,index) in rightMenu" 
        :key="index" 
        v-html="item" 
        :class="{'menu-active':menuActive==index}"
        @click="hrefGoModel(index)"></span>
      </div>
    </div>
  </div>
</template>

<script>
import banner from "@/components/banner-top";
import vtitle from "@/components/title";
import tips from "@/components/tips";
import wowInit from "@/mixins/wowInit";
import wave from '@/utils/wave.es.min'
export default {
  data() {
    return {
      itemNum: 0,
      scrollEl: null,
      menuActive:0,
      timer:null,
      scrollArr:[],
      rightMenu:['财税困扰','严重后果','服务内容','服务流程','服务承诺','服务价值','客户评价','行业洞察'],
      swiperOption: {
        direction: "vertical",
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
        loop: true,
        autoplay: {
          delay: 4500,
          disableOnInteraction: false
        }
      },
      bannerTxt: {
        first: "财咖小变化，企业大未来",
        second: "Get more with less",
        third: "财咖智能财税托管平台",
        fourth: "立即咨询"
      },
      dataListsOne: [
        {
          contentTitle: "成本高",
          text: "相关人力成本 |各项开支高"
        },
        {
          contentTitle: "质量差",
          text: "无法及时反应真实经营情况 |无法为考核决策提供数据支撑 "
        },
        {
          contentTitle: "风险高",
          text: "影响企业正常经营、 |融资、上市等"
        }
      ],
      dataListsTwo: [
        {
          contentTitle: "资金紧张",
          text: "甚至资金断裂"
        },
        {
          contentTitle: "遭受罚款",
          text: "不能正常经营和发展|甚至承担刑事责任 "
        },
        {
          contentTitle: "决策失误",
          text: "拖累企业发展"
        }
      ],
      dataListsThree: [
        {
          contentTitle: "信息系统",
          text:
            "一套由我们负责 永久更新且 适用您所处行业 的信息系统 或适用您已有 信息系统的解决方案 "
        },
        {
          contentTitle: "财税服务",
          text:
            "记账报税 档案电子化 税务筹划、内制设计 资本路径规划、 股权激励 投融资方案等 "
        },
        {
          text: "平均仅需要花费您 原来 60% 的成本"
        },
        {
          contentTitle: "分析报告",
          text:
            "为每家客户定期提供 经营分析、资金状况 风险预警 行业解决方案等 定制化报告 "
        },
        {
          contentTitle: "财税服务",
          text:
            "高质量服务团队 并为每家公司量身配备 曾任职本行业知名公司 财务经理以上职位的 真正专业人才 "
        }
      ],
      dataListsFour: [
        {
          text: "协助我们进行项目评估"
        },
        {
          text: "协商确定我们提供的报价"
        },
        {
          text: "会同您的财务核心团队 确定财务人员的 新设、保留、替换方案 "
        },
        {
          text: "会同您的财务核心团队 实施财务工作及档案交接"
        },
        {
          text: "开始服务"
        }
      ],
      dataListsFive: [
        {
          contentTitle: "3个月无理由全额退款",
          text: "自服务开始后，3个月内无理由退还您全部的 服务费用"
        },
        {
          contentTitle: "全额承担人员变更成本",
          text: "因接受本服务而产生的裁撤您原有财务人员的成本，由我们全额承担"
        },
        {
          contentTitle: "全额承担任何损失",
          text: "服务期间内，因我们的原因给您造成的任何损失，由我们全额承担"
        }
      ],
      dataListsSeven: [
        {
          contentTitle: "掌上纵横 ",
          disc:
            "掌上纵横—FP经济（粉丝经济）创领者，综合娱乐IP运营商，致力于成为全球领先的数字娱乐 集团。前新三板上市公司，拟港股上市。",
          text:
            "财咖有一支非常专业的财务服务团队，享受财咖的整体服务以来，在税务风险防控、财务分析精细化、结算及时性、预算管理水平等各方面都有显著的提升。此外，财咖还具备软件开发能力，" +
            "为我们开发的游戏业务结算系统将我们原本需要四个财务人员的结算岗变成仅需要一个人就可以完成，大大提高了公司运营效率，降低了运营成本。 "
        },
        {
          contentTitle: "少年派影业  ",
          disc:
            "少年派影业，致力于成为中国新六大影视发行公司，运营两年即取得了近亿元的业绩，2018年影院上线的由少年派投资制作的电影《无名之辈》取得了票房口碑的双丰收。",
          text:
            "财咖入主公司财务以来，公司不仅在核算水平上有了大幅度的提升，业务和财务数据不脱节了，" +
            "财务团队成本也从原本6个人的成本降低到了目前仅不到4个人的成本。难能可贵的是，财咖在提供基础财务服务的同时，还给公司经营提供了很多非常好的意见。 "
        },
        {
          contentTitle: "优客工场 ",
          disc:
            "优客工场，中国共享办公行业首个独角兽企业，同时也是中国首家完成全球化布局的共享办公企业，致力于营造理想的工作生活方式场景，为创新者赋能。",
          text:
            "财咖不同于一般的财务公司，他们有一支个人素养高、韧性强的出色团队，可以根据客户需求提供非常多的个性化服务，" +
            "为我们在财务预测模型、财务合并模型、收购公司的财务规范、财务共享中心的总体支撑等方面提供了非常有力的帮助。 "
        }
      ],
      dataListsSix: [
        {
          text: "不花一份冤枉钱"
        },
        {
          text: "高效的财务大脑 最佳的经营决策"
        },
        {
          text: "财税风险降为0 "
        }
      ],
      dataListsEight: [
        {
          contentTitle: "税率调整后，你的开票规范了吗？ ",
          disc:
            "税率调整后，你的开票规范了吗？税率调整后，你的开票规范了吗？税率调整后，你的开票规 范了吗？税率调整后，你的开票规范了吗？税 率调整后。"
        },
        {
          contentTitle: "税率调整后，你的开票规范了吗？  ",
          disc:
            "税率调整后，你的开票规范了吗？税率调整后，你的开票规范了吗？税率调整后，你的开票规 范了吗？税率调整后，你的开票规范了吗？税 率调整后。"
        }
      ],
      tipsActive: 0
    };
  },
  components: {
    banner,
    vtitle,
    tips
  },
  mixins: [wowInit],
  mounted() {
    let option = Object.assign(this.returnOption,{
      number: 3,
      velocity: 1,
      colors: ['#2E7EC9'],
      opacity: 0.5,
      position: 'bottom',
    })
    this.waveFn = new wave('#wave1', option);
    this.waveFn.animate();
    window.addEventListener('resize',this.resize)
    setInterval(() => {
      this.tipsActive = this.tipsActive == 4 ? 0 : ++this.tipsActive;
    }, 2500);
    setTimeout(() => {
      let titles = document.querySelectorAll('.title');
      titles.forEach((element,index) => {
        const itemSecond =titles[index+1]? titles[index+1].offsetTop-56 : 99999;
        this.scrollArr.push([element.offsetTop-56,itemSecond])
      });
      this.returnActive();
    }, 100);
    
    window.addEventListener('scroll',this.scroll);
  },
  computed:{
    returnOption(){
      let option = document.documentElement.offsetWidth<=414?{
        height:20,
        smooth: 50,
      }:{
        height:40,
        smooth: 80
      };
      return option
    }
  },
  methods:{
    resize(){
      this.waveFn.reset();
      this.waveFn.setOptions(this.returnOption);
    },
    scroll(){
       if(this.timer){
         clearTimeout(this.timer);
         this.timer = null;
       }
       this.timer = setTimeout(() => {
         this.returnActive();
       }, 350);
      //this.returnActive();
    },
    hrefGoModel(index){
      const item = this.scrollArr[index];
        document.body.scrollTop = document.documentElement.scrollTop =  item[0];
      this.menuActive = index;
    },
    returnActive(){
      const top = window.pageYOffset  //用于FF
          || document.documentElement.scrollTop
          || document.body.scrollTop
          || 0;
      for(let i = 0;i< this.scrollArr.length;i++){
        const item = this.scrollArr[i];
        if(top>item[0]&&top<item[1]){
          this.menuActive = i;
          break;
        }
      }
    }
  },
  destroyed(){
    window.removeEventListener('resize',this.resize);
    window.removeEventListener('scroll',this.scroll)
  }
};
</script>

<style lang="less" scoped>
.right-nav{
  @solid:1px solid rgba(0,0,0,.19);
  position: fixed;
  right: 0;
  top: 50%;
  transform:translateY(-50%);
  z-index: 555;
  text-align: center;
  width:90px;
  height: 80px;
  transition: all 0.5s;
  overflow: hidden;
  border: none;
  .right-nav-menu{
    span{
      display: block;
      line-height: 30px;
      font-size: 12px;
      &:hover,&.menu-active{
        background: #2165B5;
        color: white;
        cursor: pointer;
      }
    }
  }
  &:hover{
    border-top: @solid;
    border-bottom: @solid;
    border-left:@solid;
    border-radius: 3px;
    height:324px;
    background: white;
  }
  img{
    width: 60px;
    height: 60px;
    cursor: pointer;
    padding:10px 0; 
  }
}
.banner-content {
  color: #ffffff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  .header-wap {
    padding-left: 20px;
    align-items: center;
    flex-flow: wrap;
    height: 100%;
    .first {
      font-size: 16px;
    }
    .second {
      margin: 10px 0;
      text-align: center;
      font-size: 12px;
    }
    .fourth {
      text-align: center;
      p {
        padding: 7px 15px;
        display: inline-block;
        border: 1px solid white;
        font-size: 12px;
      }
    }
  }
}
.troubled {
  display: inline-block;
  .flex {
    height: 100%;
  }
}
.fadeIn-enter-active,
.fadeIn-leave-active {
  transition: all 1s ease;
}
.fadeIn-enter-active,
.fadeIn-leave {
  opacity: 1;
}
.fadeIn-enter,
.fadeIn-leave-active {
  opacity: 0;
}
</style>
